<template id="homePage">
  <div class="homePage">
    <div class="pc" ref="pcTop" id="pcTop">
      <transition :name="leftPathTransition">
        <div class="leftPath" v-show="leftMenu.isMenuActive">
          <div class="leftContent">
            <div class="top">
              <p class="topInfo">
                Total Entires: <span>{{ tagsData.totalEntires }}</span>
              </p>
              <p class="topInfo">
                Total Tags: <span>{{ tagsData.totalTags }}</span>
              </p>
            </div>
            <div class="center">
              <!----------------------标签列表 ---------------------->
              <div
                class="tagItem"
                v-for="(item, index) in tagsData.tagsList"
                :key="index"
              >
                <TagList
                  :options="item"
                  :currentClick="currentClick"
                  @click="addTag"
                  v-if="item.needShow"
                  :ref="`tagRef${index}`"
                />
              </div>
            </div>
          </div>
          <div class="rightContent" @click="closeLeftPath"></div>
        </div>
      </transition>

      <div class="rightPath">
        <!----------------------搜索框 ---------------------->
        <div class="top disCenter">
          <ZySearch
            :zyModel="searchData"
            ref="search"
            @search="search"
            @submit="submit"
          />
        </div>
        <div class="center aCenter">
          <!----------------------新增按钮 ---------------------->
          <div class="btnGroup aCenter">
            <div class="btn" v-dc="newEntry">New Entry</div>
            <div
              class="btn whiteBtn"
              v-dc="newImport"
              v-if="
                !equipment.isPhone &&
                (tabInfo.currentTab == 0 || tabInfo.currentTab == 3)
              "
            >
              Import
            </div>
          </div>
          <!----------------------选项卡 ---------------------->
          <div
            class="tab disCenter"
            v-if="cardList.length > 0 || currentWidth >= 780"
          >
            <div
              class="tabItem disCenter"
              v-for="(item, index) in tabInfo.tabList"
              :key="index"
              @click="choseTab(item)"
            >
              <p :class="{ isTab: tabInfo.currentTab == item.id }">
                {{ item.name }}
              </p>
              <div :class="{ isLine: tabInfo.currentTab == item.id }"></div>
            </div>
          </div>
        </div>
        <div class="body">
          <!----------------------搜索内容 ---------------------->
          <div class="searchResult aCenter">
            <p>{{ searchData.tip }}</p>
            <div class="resultGroup aCenter">
              <div
                class="resultItem"
                v-for="(item, index) in searchData.list"
                :key="index"
              >
                <ZyTag :options="item" @delete="delTag(item)" />
              </div>
            </div>
          </div>
          <!----------------------卡片内容 ---------------------->
          <div
            class="cardGroup"
            v-if="cardList.length"
            :class="[{ isLoading: isLoading }, { Load: !isLoading }]"
          >
            <div
              class="cardItem"
              v-for="(item, index) in cardList"
              :key="index"
              @click="toDetail(item)"
            >
              <HomeCard :options="item" />
            </div>
          </div>
          <!----------------------没有搜索到内容 ---------------------->
          <div
            class="noFound"
            v-else-if="!cardList.length && searchData.searchValue"
          >
            <p class="aCenter">
              Found no entry that contains: <span> lorem ipsumus</span>
            </p>
          </div>
          <!----------------------默认空内容 ---------------------->
          <div class="default" v-else>
            <img :src="defaultArr" />
            <p class="aCenter">
              Kickstart your own enchiridion by adding a new entry.
            </p>
          </div>
          <div class="loadingContent" v-if="isLoading">
            <ZyLoading :options="isLoading" />
          </div>
        </div>
        <!----------------------分页 ---------------------->
        <div class="foot aCenter" v-if="cardList.length">
          <div class="pagination">
            <ZyelPagination
              :options="pagination"
              @handleCurrentChange="handleCurrentChange"
            />
          </div>
          <p class="entries">
            Showing <span>{{ pagination.show }}</span> to {{ pagination.to }} of
            <span>{{ pagination.total }}</span> entries
          </p>
        </div>
      </div>

      <!----------------------新建/编辑卡片弹窗 ---------------------->
      <transition :name="newAndEditCardData.maskTransition">
        <div class="cardPop disCenter mask" v-show="newAndEditCardData.isShow">
          <home-popup
            :options="newAndEditCardData"
            @discard="discard"
            @save="save"
          >
            <template v-slot:top>
              <div class="cardTop aCenter">
                <div class="cardTopLeft aCenter">
                  <p class="cardTopName">New entry from:</p>
                  <div class="singleGroup sCenter">
                    <div
                      class="singleItem"
                      v-for="(item, index) in newAndEditCardData.typeList"
                      :key="index"
                    >
                      <zy-single
                        :zyModel="item.isClick"
                        @click="changeCardType(item)"
                      >
                        <template v-slot:checkTitle>
                          <p
                            class="checkTitle"
                            :class="
                              item.isClick && !isInit == true ? 'blink' : ''
                            "
                          >
                            {{ item.name }}
                          </p>
                        </template>
                      </zy-single>
                    </div>
                  </div>
                </div>
                <div class="cardTitle">
                  <input
                    spellcheck="false"
                    type="text"
                    v-model="newAndEditCardData.title"
                    :placeholder="getPlaceholder"
                    @focus="
                      cardLine.isShow = true;
                      cardLine.type = 1;
                    "
                    @blur="
                      cardLine.isShow = false;
                      cardLine.type = '';
                    "
                  />
                  <transition :name="cardLine.transitionName">
                    <div
                      class="cardLine"
                      v-show="cardLine.isShow && cardLine.type == 1"
                    ></div>
                  </transition>
                </div>
              </div>
            </template>
            <template v-slot:bottom>
              <div class="cardCenter aCenter">
                <div class="cardTagList aCenter">
                  <div
                    class="cardTagItem"
                    v-for="(item, index) in newAndEditCardData.tagList"
                    :key="index"
                  >
                    <ZyTag :options="item" @delete="delEditTag(item)" />
                  </div>
                </div>
                <div class="newTag" v-if="newAndEditCardData.isShowNewEdit">
                  <input
                    type="text"
                    spellcheck="false"
                    autocomplete="off"
                    v-model="newAndEditCardData.newTagVal"
                    ref="newTag"
                    @blur="addEditTag2"
                    @keyup.enter="addEditTag2"
                  />
                  <transition :name="cardLine.transitionName">
                    <div
                      class="cardLine"
                      v-show="cardLine.isShow && cardLine.type == 2"
                    ></div>
                  </transition>
                </div>
                <div class="cardTagNew" v-else>
                  <span @click="addEditTag">add tag</span>
                </div>
                <p class="cardID" v-if="newAndEditCardData.id">
                  Entry ID:{{ newAndEditCardData.id }}
                </p>
              </div>
            </template>
          </home-popup>
        </div>
      </transition>

      <!----------------------查看卡片详情弹窗 ---------------------->
      <transition :name="cardDetails.maskTransition">
        <div
          class="cardDetails disCenter mask"
          @click="closeCardDetails('contentLeaveBottom')"
          v-show="cardDetails.isShow"
        >
          <home-popup :options="cardDetails">
            <template v-slot:top>
              <div class="readTop aCenter">
                <div class="cardTagList aCenter">
                  <div
                    class="cardTagItem"
                    v-for="(item, index) in cardDetails.label"
                    :key="index"
                  >
                    <p class="hiden">{{ item }}</p>
                  </div>
                </div>
                <div class="optionGroup aCenter">
                  <div class="disCenter btn delete" @click="deletCard"></div>
                  <div class="disCenter btn share" @click="shareCard"></div>
                  <div class="disCenter btn edit" @click="editCard"></div>
                </div>
              </div>
            </template>
            <template v-slot:bottom>
              <div class="readBottom">
                <div class="timeAndId disCenter">
                  <p class="cardID">#{{ cardDetails.seqNum }}</p>
                  <p class="cardTime">
                    Created on {{ trimDate(cardDetails.createtime) }}
                  </p>
                </div>
                <div class="froms">
                  <p class="cardFrom">From {{ cardDetails.type }}</p>
                  <p class="cardDesc hiden">{{ cardDetails.source }}</p>
                </div>
                <div class="icon disCenter">B</div>
              </div>
            </template>
          </home-popup>
        </div>
      </transition>

      <!----------------------导入卡片弹窗 ---------------------->
      <transition :name="importCard.maskTransition">
        <div
          class="cardPop disCenter mask"
          @click="closeImportCard"
          v-show="importCard.isShow"
        >
          <HomeImport
            :options="importCard"
            @uploadFiles="uploadFiles"
          ></HomeImport>
        </div>
      </transition>

      <!----------------------导入等待弹窗 ---------------------->
      <transition :name="importLoad.maskTransition">
        <div
          class="cardPop disCenter mask"
          @click="closeImportLoad"
          v-show="importLoad.isShow"
        >
          <ImportLoading
            :options="importLoad"
            @isFinish="importFinish"
          ></ImportLoading>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { setCookie, getCookie } from "@/utils/cookie.js";
import { showMessage, isPhone } from "@/utils";
import { createNamespacedHelpers } from "vuex";
const home = createNamespacedHelpers("home");
const common = createNamespacedHelpers("common");
const newAndEditCard = createNamespacedHelpers("newAndEditCard");
import TagList from "./compontents/TagList.vue"; //左侧标签列
import HomeCard from "./compontents/HomeCard.vue"; //卡片
import ZyelPagination from "../../components/pc/ZyelPagination.vue"; //分页
import ZyLoading from "../../components/pc/ZyLoading.vue"; //loading动画
import ZyTag from "../../components/pc/ZyTag.vue"; //标签
import HomePopup from "./compontents/HomePopup.vue";
import ZySingle from "../../components/pc/ZySingle.vue";
import HomeImport from "./compontents/HomeImport.vue";
import ImportLoading from "./compontents/ImportLoading.vue";
export default {
  name: "homePage",
  components: {
    TagList,
    HomeCard,
    ZyelPagination,
    ZyLoading,
    ZyTag,
    HomePopup,
    ZySingle,
    HomeImport,
    ImportLoading,
  },
  // 定义属性
  data() {
    return {
      currentClick: "",
      leftPathTransition: "",
      isInit: true,
      defaultArr: require("@/assets/images/home/pc/defaultArr.png"), //默认箭头
      cardLine: {
        transitionName: "", //输入框动画名称
        isShow: false,
        type: "",
      },
      cardDetails: {
        isShow: false, //弹窗是否显示
        maskTransition: "", //背景动画名称
        cardTransition: "", //卡片动画名称
        desc: "", //文本域内容
        isShowBtn: false, //是否显示按钮
        readOnly: false, //是否可读
        type: "", //来自类型
        seqNum: "",
      },
      importCard: {
        //导入卡片弹窗
        isShow: false,
        maskTransition: "",
        cardTransition: "",
      },
      importLoad: {
        //导入等待弹窗
        isShow: false,
        maskTransition: "",
        cardTransition: "",
      },
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...home.mapState([
      "cardList",
      "tagsData",
      "tabInfo",
      "pagination",
      "searchData",
      "isLoading",
    ]),
    ...newAndEditCard.mapState(["newAndEditCardData"]),
    ...common.mapState(["equipment", "leftMenu", "currentWidth", "userInfo"]),
    ...common.mapMutations(["userSignout"]),
    getPlaceholder() {
      if (this.currentWidth < 980) {
        return "Lorem ipsum dolor sit amet";
      } else {
        return "Comment on the source/Title of the Book/Source URL";
      }
    },
  },
  // 监控data中的数据变化
  watch: {
    currentWidth: {
      handler(newName, oldName) {
        if (newName <= 780) {
          //小于780关闭导入弹窗
          if (this.importCard.isShow) {
            this.closeImportCard();
          }
        }
      },
    },
    newAndEditCardData: {
      handler(newName, oldName) {
        if (newName.isShow) {
          this.newAndEditCardData.maskTransition = "maskEnter";
        } else {
          this.newAndEditCardData.maskTransition = "maskLeave";
        }
      },
      immediate: true,
      deep: true,
    },
    cardDetails: {
      handler(newName, oldName) {
        if (newName.isShow) {
          this.cardDetails.maskTransition = "maskEnter";
        } else {
          this.cardDetails.maskTransition = "maskLeave";
        }
      },
      immediate: true,
      deep: true,
    },
    importCard: {
      handler(newName, oldName) {
        if (newName.isShow) {
          this.importCard.maskTransition = "maskEnter";
        } else {
          this.importCard.maskTransition = "maskLeave";
        }
      },
      immediate: true,
      deep: true,
    },
    importLoad: {
      handler(newName, oldName) {
        if (newName.isShow) {
          this.importLoad.maskTransition = "maskEnter";
        } else {
          this.importLoad.maskTransition = "maskLeave";
        }
      },
      immediate: true,
      deep: true,
    },
    cardLine: {
      handler(newName, oldName) {
        if (newName.isShow) {
          this.cardLine.transitionName = "cardLineEnter";
        } else {
          this.cardLine.transitionName = "cardLineLeave";
        }
      },
      immediate: true,
      deep: true,
    },
    leftMenu: {
      handler(newName, oldName) {
        if (newName.isMenuActive) {
          this.leftPathTransition = "leftPathEnter";
        } else {
          this.leftPathTransition = "leftPathLeave";
        }
      },
      immediate: true,
      deep: true,
    },
  },
  // 方法集合
  methods: {
    ...home.mapMutations(["setCardList"]),
    ...newAndEditCard.mapMutations(["openCardPop", "closeCardPop"]),
    ...home.mapActions(["getEntries", "getLeftEntries"]),

    //时间格式
    trimDate(time) {
      if (time) {
        let date = time.split(" ")[0];
        let year = date.split("-")[0];
        let month = date.split("-")[1];
        let day = date.split("-")[2];
        return day + "/" + month + "/" + year;
      }
    },

    //关闭左侧菜单栏
    closeLeftPath() {
      this.leftMenu.isMenuActive = false;
    },

    submit(val) {
      //回车搜索
      if (val) {
        this.searchData.tip = "Search results for: ";
        this.searchData.searchValue = val;
        let has = this.searchData.list.some((item, index) => {
          if (item.id == "Search_1") {
            item.name = val;
            return item;
          }
        });
        if (!has) {
          this.searchData.list.push({
            name: this.searchData.searchValue,
            id: "Search_1",
          });
        }
      } else if (!val && !this.searchData.list.length) {
        this.searchData.tip = "";
      }
      this.getEntries();
    },

    search(val) {
      //单个输入搜索
      if (val) {
        this.searchData.tip = "Search results for: ";
      } else if (!val && !this.searchData.list.length) {
        console.log("in");
        this.searchData.list = new Array();
        this.searchData.tip = "";
      } else if (!val && this.searchData.list.length) {
        this.searchData.list.map((item, index) => {
          if (item.id == "Search_1") {
            this.searchData.searchValue = "";
            this.searchData.list.splice(index, 1);
          }
        });
        this.getEntries();
      }
    },

    addTag(payload) {
      //添加标签卡
      this.currentClick = payload.id;
      if (payload.type == "tags") {
        this.searchData.tagValue = payload.name;
        this.searchData.sourceValue = "";
      } else if (payload.type == "sources") {
        this.searchData.sourceValue = payload.name;
        this.searchData.tagValue = "";
      } else if (payload.type == "books") {
        this.searchData.sourceValue = payload.name;
        this.searchData.tagValue = "";
      }

      if (this.searchData.list.length == 0) {
        this.searchData.tip = "Active Filter:";
        this.searchData.list.push(payload);
      } else if (this.searchData.list.length == 1) {
        if (this.searchData.list[0].id == "Search_1") {
          this.searchData.tip = "Search results for:";
          this.searchData.list.push(payload);
        } else {
          this.searchData.list.splice(0, 1, payload);
        }
      } else {
        this.searchData.tip = "Search results for:";
        this.searchData.list.map((item, index) => {
          if (item.id !== "Search_1") {
            this.searchData.list.splice(index, 1, payload);
          }
        });
      }
      this.getEntries();
      if (isPhone(650)) {
        setTimeout(() => {
          this.closeLeftPath();
        }, 500);
      }
    },

    //删除搜索标签
    delTag(item) {
      this.searchData.list.map((element, index) => {
        if (element.id == item.id) {
          if (item.id == "Search_1") {
            //通过输入框添加入列的
            this.searchData.searchValue = "";
            this.searchData.tip = "Active Filter:";
          } else {
            this.searchData.tagValue = "";
            this.searchData.sourceValue = "";
            this.currentClick = "";
            this.searchData.tip = "Search results for:";
          }
          this.searchData.list.splice(index, 1);
        }
      });
      if (!this.searchData.list.length) {
        this.searchData.tip = "";
      }
      this.getEntries();
    },

    //选择类别
    choseTab(item) {
      this.tabInfo.currentTab = item.id;
      this.searchData.list = [];
      this.searchData.sourceValue = "";
      this.searchData.tagValue = "";
      this.searchData.searchValue = "";
      this.searchData.tip = "";
      this.pagination.page = 1;
      this.tagsData.type = 0;
      this.currentClick = "";
      this.$nextTick(() => {
        this.tagsData.tagsList.map((item, index) => {
          if (item.list.length) {
            this.$refs[`tagRef${index}`][0].initTag();
          }
        });
      });
      this.getEntries();
      this.getLeftEntries();
    },

    //分页
    handleCurrentChange(payload) {
      this.pagination.page = payload;
      this.getEntries();
      document.querySelector("#home").scrollIntoView(true);
    },
    //----------------------------------------卡片弹窗相关----------------------------------------

    //------------详情弹窗------------
    //打开详情弹窗
    openCardDetails() {
      this.cardDetails.cardTransition = "contentEnterBottom";
      this.cardDetails.isShow = true;
    },
    //关闭详情弹窗
    closeCardDetails(type) {
      this.cardDetails.cardTransition = type ? type : "contentLeaveBottom";
      this.cardDetails.isShow = false;
    },
    //查看卡片详情
    toDetail(item) {
      this.openCardDetails();
      this.cardDetails.desc = item.content;
      this.cardDetails.label = item.label;
      this.cardDetails.id = item.id;
      this.cardDetails.seqNum = item.seqNum;
      this.cardDetails.createtime = item.createtime;
      this.cardDetails.source = item.source;
      if (item.type == 3) {
        this.cardDetails.type = "Book";
      } else if (item.type == 1) {
        this.cardDetails.type = "Web";
      } else if (item.type == 2) {
        this.cardDetails.type = "Ideas";
      }
    },
    //------------新建修改弹窗------------
    //新建卡片弹窗
    newEntry() {
      this.newAndEditCardData.isNew = true;
      this.openCardPop();
    },

    //删除卡片
    async deletCard() {
      let res = await this.$api.home.deleteMultipleEntriesApi({
        userId: this.userInfo.userId, //用户id
        ids: [this.cardDetails.id], //帖子id
        status: 2, //状态1恢复，2删除
      });
      if (this.$isCode(res, true)) {
        this.getEntries();
        this.getLeftEntries();
        this.closeCardDetails("contentLeaveTop");
      }
    },
    //分享卡片
    shareCard() {},
    //编辑卡片
    editCard() {
      this.closeCardDetails();
      this.newAndEditCardData.isNew = false;
      if (this.cardDetails.label) {
        this.cardDetails.label.map((item, index) => {
          this.newAndEditCardData.tagList.push({ name: item, id: index });
        });
      }
      this.newAndEditCardData.title = this.cardDetails.source;
      this.newAndEditCardData.desc = this.cardDetails.desc;
      this.newAndEditCardData.id = this.cardDetails.id;
      this.newAndEditCardData.typeList.map((item) => {
        if (item.name == this.cardDetails.type) {
          item.isClick = true;
        } else {
          item.isClick = false;
        }
      });
      setTimeout(() => {
        this.openCardPop();
      }, 300);
    },
    //删除新建/修改卡片标签
    delEditTag(item) {
      this.newAndEditCardData.tagList.map((element, index) => {
        if (element.id == item.id) {
          element.isClick = false;
          this.newAndEditCardData.tagList.splice(index, 1);
        }
      });
    },
    //添加新建/修改卡片标签样式
    addEditTag() {
      if (this.newAndEditCardData.tagList.length >= 5) {
        showMessage("Only add up to five tags", "warning");
      } else {
        this.newAndEditCardData.isShowNewEdit = true;
        this.$nextTick(() => {
          let length = this.newAndEditCardData.newTagVal.length;
          let input = this.$refs.newTag;
          input.focus();
          this.cardLine.isShow = true;
          this.cardLine.type = 2;
          input.selectionStart = length;
          input.selectionEnd = length;
        });
      }
    },
    //添加新建/修改卡片标签逻辑
    addEditTag2() {
      this.cardLine.isShow = false;
      this.cardLine.type = "";
      this.newAndEditCardData.isShowNewEdit = false;
      let temp = {
        name: this.newAndEditCardData.newTagVal,
        id: this.newAndEditCardData.tagList.length,
      };
      if (this.newAndEditCardData.newTagVal) {
        this.newAndEditCardData.tagList.push(temp);
        this.newAndEditCardData.newTagVal = "";
      }
    },
    //取消卡片弹窗
    discard() {
      this.closeCardPop();
      if (!this.newAndEditCardData.isNew) {
        setTimeout(() => {
          this.openCardDetails();
        }, 300);
      }
    },
    //新增卡片
    async saveEntry() {
      let label = [];
      this.newAndEditCardData.tagList.map((item, index) => {
        label.push(item.name);
      });
      let type = 0;
      this.newAndEditCardData.typeList.map((item) => {
        if (item.isClick) {
          type = item.id;
        }
      });
      let res = await this.$api.home.saveEntryApi({
        userId: this.userInfo.userId, //用户id
        label: label, //标签
        content: this.newAndEditCardData.desc, //内容
        type: type, //类型 1.网页 2.脑洞 3.书籍
        source: this.newAndEditCardData.title, //来源
      });
      if (this.$isCode(res, true)) {
        this.getEntries();
        this.getLeftEntries();
        this.closeCardPop("contentLeaveTop");
      }
    },

    //修改卡片
    async updateEntry() {
      let label = [];
      this.newAndEditCardData.tagList.map((item, index) => {
        label.push(item.name);
      });
      let type = 0;
      this.newAndEditCardData.typeList.map((item) => {
        if (item.isClick) {
          type = item.id;
        }
      });
      let res = await this.$api.home.updateEntryApi({
        userId: this.userInfo.userId, //用户id
        id: this.newAndEditCardData.id, //帖子id
        content: this.newAndEditCardData.desc, //内容
        source: this.newAndEditCardData.title, //来源
        type: type, //类型 1.网页 2.脑洞 3.书籍
        label: label, //标签
      });
      if (this.$isCode(res, true)) {
        this.getEntries();
        this.getLeftEntries();
        this.closeCardPop("contentLeaveTop");
      }
    },
    //新建保存、修改卡片弹窗
    save() {
      if (this.newAndEditCardData.isNew) {
        this.saveEntry();
      } else {
        this.updateEntry();
      }
    },

    //改变当前卡片弹窗类型
    changeCardType(val) {
      this.isInit = false;
      this.newAndEditCardData.typeList.map((item, index) => {
        item.isClick = false;
        if (item.id === val.id) {
          item.isClick = true;
        }
      });
    },

    //------------文件上传弹窗------------
    //关闭导入弹窗
    closeImportCard() {
      this.importCard.cardTransition = "contentLeaveBottom";
      this.importCard.isShow = false;
    },

    //打开导入弹窗
    newImport() {
      this.importCard.cardTransition = "contentEnterBottom";
      this.importCard.isShow = true;
    },
    //导入动画结束
    importFinish(payload) {
      this.getEntries();
      this.getLeftEntries();
      if (payload.code == 200) {
        showMessage("成功", "success");
        this.closeImportLoad();
      } else {
        showMessage("失败", "error");
        this.closeImportLoad("contentLeaveBottom");
        setTimeout(() => {
          this.newImport();
        }, 500);
      }
    },
    //选择文件
    uploadFiles(payload) {
      this.importLoad.files = payload.files;
      this.importLoad.name = payload.name;
      this.closeImportCard();
      setTimeout(() => {
        this.openImportLoad();
      }, 300);
    },
    //------------上传等待弹窗------------
    openImportLoad() {
      this.importLoad.cardTransition = "contentEnterBottom";
      this.importLoad.isShow = true;
    },
    closeImportLoad(type) {
      this.importLoad.cardTransition = type ? type : "contentLeaveTop";
      this.importLoad.isShow = false;
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getEntries();
    this.getLeftEntries();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.homePage {
  padding-bottom: 37px;
  max-width: 1440px;
  margin: 0 auto;

  .pc {
    width: 100%;
    margin-left: 63px;
    display: flex;

    .leftPath {
      width: 193px;

      .top {
        .topInfo {
          font-size: 12px;
          color: @tColor;
          margin-bottom: 5px;
        }
      }

      .center {
        margin-top: 33px;
        overflow-y: scroll;
        max-height: 872px;

        .tagItem {
          // margin-bottom: 30px;
        }
      }

      .center::-webkit-scrollbar {
        display: none;
        width: 0px !important;
        height: 0px !important;
      }
    }

    .rightPath {
      margin-left: 4.1%;
      width: calc(100% - 253px);

      .center {
        margin-top: 20px;
        position: relative;

        .btnGroup {
          position: absolute;
          top: 0;
          left: 0;

          .btn:first-child {
            margin-right: 10px;
          }
        }

        .tab {
          width: 100%;
          height: 33px;

          .tabItem {
            width: 65px;
            font-size: 18px;
            color: @dColor;
            position: relative;
            padding-bottom: 10px;
            cursor: pointer;
            margin-right: 30px;

            .isLine {
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 3px;
              background-color: @tColor;
              -webkit-animation: scale-up-hor-center 0.25s
                cubic-bezier(0.39, 0.575, 0.565, 1) 0.1s both;
              animation: scale-up-hor-center 0.25s
                cubic-bezier(0.39, 0.575, 0.565, 1) 0.1s both;
            }

            .isTab {
              color: @tColor;
              -webkit-animation: focus-in-contract-bck 1s
                cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
              animation: focus-in-contract-bck 1s
                cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
            }
          }

          .tabItem:last-child {
            margin-right: 0px;
          }
        }
      }

      .body {
        position: relative;
        min-height: 742px;

        .loadingContent {
          position: fixed;
          left: 20%;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .searchResult {
          margin-top: 20px;
          font-size: 14px;
          color: @dColor;

          p {
            // height: 14px;
            min-width: 100px;
          }

          .resultGroup {
            flex-wrap: wrap;
            margin-left: 5px;
            min-height: 14px;

            .resultItem {
              // margin-right: 15px;
              margin-right: 5px;
            }
          }
        }

        .cardGroup {
          margin-top: 20px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .cardItem {
            margin-bottom: 20px;
          }

          .cardItem:nth-child(odd) {
            margin-right: 20px;
          }
        }

        .Load {
          -webkit-animation: card-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1)
            both;
          animation: card-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        }

        .isLoading {
          -webkit-animation: card-out 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            both;
          animation: card-out 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both;
        }

        .default {
          display: flex;
          justify-content: center;
          margin-top: 54px;
          position: relative;

          img {
            position: absolute;
            left: 37px;
            top: -14px;
            width: 44px;
            -webkit-animation: arrow-top 1s
              cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
            animation: arrow-top 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          }

          p {
            user-select: none;
            font-size: 24px;
            color: @tColor;
            height: 400px;
          }
        }

        .noFound {
          display: flex;
          justify-content: center;

          p {
            user-select: none;
            font-size: 18px;
            color: @dColor;
            height: 400px;

            span {
              color: @tColor;
              margin-left: 5px;
            }
          }
        }
      }

      .foot {
        margin-top: 54px;
        flex-direction: row-reverse;
        justify-content: center;
        width: inherit;
        position: relative;

        .entries {
          font-size: 12px;
          color: @dColor;
          position: absolute;
          left: 0;
        }

        .pagination {
          margin-left: 120px;
        }
      }
    }

    // 详情弹窗
    .cardDetails {
      .cardTagList {
        .cardTagItem {
          margin-right: 7px;
          cursor: pointer;

          p {
            max-width: 100px;
            color: @tColor;
            font-size: 12px;
          }
        }
      }
    }

    //新建编辑卡片
    .cardPop {
      .cardTagList {
        .cardTagItem {
          // margin-right: 17px;
          margin-right: 7px;
          cursor: pointer;

          p {
            max-width: 100px;
            color: @tColor;
            font-size: 12px;
          }
        }
      }

      .newTag {
        width: 100px;
        position: relative;

        input {
          font-size: 14px;
          color: @tColor;
          width: 100%;
          outline: none;
          border-bottom: solid 1px rgba(168, 168, 168, 0.5);
          -webkit-appearance: none;
          background-color: #fff;
          background-image: none;
          box-sizing: border-box;
          display: inline-block;
        }

        input:focus {
          border: none;
          outline: 0;
          -webkit-box-shadow: none;
          box-shadow: none;
        }
      }

      .cardTagNew {
        cursor: pointer;
        font-size: 12px;
        color: @tColor;
      }

      .cardTagNew:hover {
        -webkit-animation: blink 0.9s infinite both;
        animation: blink 0.9s infinite both;
      }
    }

    .cardTop {
      .cardTopName {
        min-width: 85px;
        font-size: 12px;
        color: @dColor;
      }

      .singleGroup {
        margin: 0 14px;

        .singleItem {
          margin-right: 9px;

          .checkTitle {
            font-size: 12px;
            color: @tColor;
            margin-left: 6px;
          }
        }

        .singleItem:last-child {
          margin-right: 0px;
        }
      }

      .cardTitle {
        width: 100%;
        position: relative;

        input {
          width: 100%;
          outline: none;
          padding: 0 7px 5px 7px;
          border-bottom: solid 1px rgba(168, 168, 168, 0.5);
          -webkit-appearance: none;
          background-color: #fff;
          background-image: none;
          box-sizing: border-box;
          color: #575757;
          display: inline-block;
          font-size: 12px;
        }

        input:hover {
          cursor: grab;
        }
      }
    }

    .cardCenter {
      margin-top: auto;

      .cardID {
        margin-left: auto;
        font-size: 12px;
        color: rgba(194, 194, 194, 0.5);
      }
    }

    //查看卡片
    .readTop {
      .cardTagList {
        .cardTagItem {
          cursor: unset;
          user-select: none;
        }
      }

      .optionGroup {
        margin-left: auto;

        .delete {
          width: 16px;
          height: 16px;
          background: url("~@/assets/images/home/pc/deleteBtn.png");
          background-size: 100% 100%;
          box-shadow: none;
        }

        .share {
          width: 16px;
          height: 16px;
          background: url("~@/assets/images/home/pc/shareBtn.png");
          background-size: 100% 100%;
          box-shadow: none;
          margin-left: 17px;
        }

        .edit {
          width: 16px;
          height: 16px;
          background: url("~@/assets/images/home/pc/editBtn.png");
          background-size: 100% 100%;
          box-shadow: none;
          margin-left: 17px;
        }
      }
    }

    .readBottom {
      user-select: none;
      margin-top: auto;
      font-size: 12px;
      display: flex;
      align-items: flex-end;

      .timeAndId {
        .cardID {
          color: rgba(194, 194, 194, 0.5);
        }

        .cardTime {
          margin-left: 12px;
          color: #c2c2c2;
        }
      }

      .froms {
        max-width: 50%;
        margin-left: auto;
        color: #c2c2c2;
        text-align: right;
      }

      .icon {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 1400px) {
  .homePage {
    .pc {
      .leftPath {
        .center {
          max-height: unset;
        }
      }

      .rightPath {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .center {
          flex-direction: column;

          .btnGroup {
            position: unset;
            margin-bottom: 20px;
          }
        }

        .body {
          width: max-content;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin: 0 auto;

          .searchResult {
            justify-content: left;
          }

          .cardGroup {
            flex-direction: column;

            .cardItem {
              margin-right: 0 !important;
            }

            .cardItem:last-child {
              margin-bottom: 0;
            }
          }

          .default {
            img {
              left: 106px;
              top: -54px;
            }

            p {
              width: 350px;
              line-height: 1.5;
              text-align: center;
            }
          }
        }

        .foot {
          margin-top: 24px;
          // justify-content: space-between;

          .entries {
            position: unset;
          }

          .pagination {
            margin-left: 0;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 980px) {
  .homePage {
    .pc {
      .cardDetails {
        .cardTagList {
          .cardTagItem {
            margin-right: 4px;
          }
        }

        .optionGroup {
          .share {
            margin-left: 5px;
          }

          .edit {
            margin-left: 5px;
          }
        }
      }

      .cardPop {
        .homePopup {
          .pc {
            .cardCenter {
              display: block;

              .cardTagList {
                margin-bottom: 10px;
              }

              .cardTagNew {
                height: 19px;
              }

              .cardID {
                text-align: right;
                margin-top: -19px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 900px) {
  .homePage {
    .pc {
      margin-left: 0;
      justify-content: center;

      .leftPath {
        margin-right: 10px;
      }

      .rightPath {
        .body {
          .searchResult {
            width: 531px;
            align-items: flex-start;
            justify-content: flex-start;

            .resultGroup {
              min-height: auto;

              .resultItem {
                margin-bottom: 10px;
              }
            }
          }

          .default {
            img {
              left: 196px;
            }
          }

          .cardGroup {
            margin-top: 10px;
          }
        }

        .foot {
          flex-direction: column;
          margin-top: 20px;

          .entries {
            margin-top: 10px;
          }
        }
      }
    }
  }
}

// 左边部分按钮
@media screen and (max-width: 780px) {
  .homePage {
    padding-bottom: 15px;

    .pc {
      .phoneMenu {
        height: 61px;
        position: absolute;
        top: 0;
        left: 20px;
        z-index: 900;
        display: flex;
        align-items: center;

        .menuLine {
          cursor: pointer;
          display: inline-block;
          width: 22px;
          height: 3px;
          background-color: @tColor;
          border-radius: 2px;
          position: relative;
          transition: all 0.5s ease;

          &::before {
            content: "";
            position: absolute;
            bottom: 5px;
            width: 22px;
            height: 3px;
            background-color: @tColor;
            border-radius: 2px;
            transition: all 0.5s ease;
          }

          &::after {
            content: "";
            position: absolute;
            top: 5px;
            width: 22px;
            height: 3px;
            background-color: @tColor;
            border-radius: 2px;
            transition: all 0.5s ease;
          }
        }
      }

      .isMenuActive {
        .menuLine {
          transform: rotate(45deg);

          &::before {
            transform: rotate(-90deg) translateX(-5px);
          }

          &::after {
            opacity: 0;
          }
        }
      }

      .leftPath {
        display: flex;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        margin-right: 0;

        .leftContent {
          width: calc(50% - 70px);
          padding: 67px 50px 0px 20px;
          background-color: rgba(255, 255, 255, 0.55);
          border-right: solid 1px #e9e9e9;
          backdrop-filter: blur(8px);

          .center {
            max-height: 85vh;
          }
        }

        .rightContent {
          width: 50%;
        }
      }

      .rightPath {
        padding: 0 20px;
        width: 100%;

        .body {
          .default {
            img {
              left: unset;
            }
          }
        }
      }
    }
  }
}

//手机样式
@media screen and (max-width: 650px) {
  .tab {
    width: 318px !important;
  }

  .searchResult {
    width: 318px !important;
  }

  .homePage {
    .pc {
      .rightPath {
        .body {
          margin: 0;
          width: 100%;
          min-height: unset;

          .loadingContent {
            left: 0;
          }

          .searchResult {
            width: 318px;
            margin: 20px auto 0;
          }
        }
      }

      .leftPath {
        .leftContent {
          width: calc(50% - 40px);
          padding: 67px 20px 0px 20px;
        }

        .top {
          .topInfo {
            font-size: 13px;
          }
        }
      }

      //卡片详情弹窗
      .cardDetails {
        .readTop {
          width: 100%;
          flex-direction: column-reverse;

          .optionGroup {
            .btn {
              width: 20px;
              height: 20px;
            }

            .share {
              margin-left: 10px;
            }

            .edit {
              margin-left: 10px;
            }
          }

          .cardTagList {
            flex-wrap: wrap;
            margin: 0;
            margin-top: 15px;
            width: 100%;

            .cardTagItem {
              margin-bottom: 10px;

              p {
                font-size: 14px;
              }
            }
          }
        }

        .readBottom {
          justify-content: space-between;

          .timeAndId {
            display: block;

            .cardID {
              margin-bottom: 5px;
            }

            .cardTime {
              margin-left: 0;
            }
          }

          .froms {
            display: none;
          }

          .icon {
            display: flex;
            width: 19px;
            height: 19px;
            border: solid 1px rgba(168, 168, 168, 0.5);
            color: #c2c2c2;
            font-size: 10px;
          }
        }
      }

      .cardTop {
        display: block;

        .cardTopLeft {
          justify-content: space-between;

          .singleGroup {
            .singleItem {
              .checkTitle {
                font-size: 14px;
              }
            }
          }
        }

        .cardTitle {
          input {
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 0 0 2px 0;
            border-radius: unset;
          }

          .cardLine {
            bottom: 10px;
          }
        }
      }

      .cardCenter {
        .cardTagList {
          margin-top: 10px;
          flex-wrap: wrap;
          margin-bottom: 0;

          .cardTagItem {
            margin-right: 2px;
            margin-bottom: 5px;
          }

          .cardTagItem:nth-child(3n) {
            margin-right: 0;
          }
        }

        .cardTagNew {
          font-size: 14px;
          height: auto !important;
        }

        .cardTagNew:hover {
          -webkit-animation: unset;
          animation: unset;
        }

        .cardID {
          margin-top: -10px !important;
        }
      }
    }
  }
}
</style>
